<template>
  <div class="bj-item">
    <LabelRow v-on:onMore="onMore" v-bind:label="label">
      <div>日期：<el-date-picker v-model="pickerValue" type="daterange" range-separator="至" v-on:change="pickerChange(pickerValue)" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker></div>
    </LabelRow>
    <div id="bjCharts" class="take-content"/>
  </div>
</template>
<script>
import echarts from "echarts";
import LabelRow from "../common/labelRow.vue";
import { sortingEventinfoQueryCoreDept } from "../../config/api.js";
import Pubsub from "../../utils/pubsub";

export default {
  components: {
    LabelRow
  },
  data() {
    return {
      label: {
        url: require("../../assets/pigeonholes/bj_chart_icon.png"),
        label: "分拣办结情况对比"
      },
      chartData: {},
      pickerValue: '',
      startTime: '',
      endTime: '',
    };
  },
  mounted() {
    this.getList();
    //SORT_CENTER_SITUATION办理情况ws
    this.pubsub_token1 = Pubsub.subscribe("SORT_CENTER_SITUATION", () => {
      this.getList();
    });
  },
  methods: {
    onMore() {
      console.log("onMore");
    },
    clickList() {
      console.log("clickList");
    },

    getList() {
      const {startTime,endTime}=this;
      sortingEventinfoQueryCoreDept({ startTime,endTime }).then((res = {}) => {
        this.chartData = res.data||{};
        this.initChart();
      });
	},
	pickerChange(pickerValue){
		if(pickerValue){
			this.startTime=pickerValue[0].Format("yyyy-MM-dd");
			this.endTime=pickerValue[1].Format("yyyy-MM-dd");
		}else{
			this.startTime='';
			this.endTime='';
    };
    this.getList();
	},
    initChart() {
      this.myChart = echarts.init(document.getElementById("bjCharts"),'light');
      const {avgNum=[],endNum=[],receiveNum=[],xAxis=[]}=this.chartData||{};
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     // restore: { show: true },
        //     // saveAsImage: { show: true }
        //   }
        // },
        legend: {
          data: ["接收", "办结", "平均"]
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: xAxis,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              // formatter: "{value} 条"
            }
          }
        ],
        series: [
          {
            name: "接收",
            type: "bar",
            data: receiveNum
          },
          {
            name: "办结",
            type: "bar",
            data: endNum
          },
        {
            name:'平均',
            type:'line',
            data:avgNum
        }
        ]
      };
      this.myChart.setOption(option);
    }
  },
  destroyed() {
    this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
  }
};
</script>

<style lang="scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.take-content {
  margin-top: 20px;
  height: 345px;
  /* width: 259px; */
  overflow-x: auto;
}
.bj-item {
  flex: 1;
  background: #fff;
}
.cell-ul {
  li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    cursor: pointer;
    .left {
      display: flex;
      h4 {
        margin-bottom: 6px;
      }
    }
    .parent-img {
      margin-right: 20px;
      img {
        width: 20px;
      }
    }
    .right {
      color: #999;
    }
  }
}
</style>
